<template>
  <div class="app-container">
    <el-form ref="form" v-loading="loading" :rules="registerRules" :model="form" label-width="120px">
      <el-form-item label="ID" prop="id">
        <el-input v-model="form.id" :disabled="cdisabled" />
      </el-form-item>
      <el-form-item label="产地" prop="breed_place">
        <el-input v-model="form.breed_place" placeholder="河北省秦皇岛市皮燕养殖场" />
      </el-form-item>
      <el-form-item label="重量" prop="weight">
        <el-input v-model="form.weight" type="number" placeholder="单位/kg" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio :label="1">雄</el-radio>
          <el-radio :label="2">雌</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="特征" prop="traits">
        <el-input v-model="form.traits" placeholder="黑白花" />
      </el-form-item>
      <el-form-item label="检疫状态">
        <el-switch
          v-model="form.check_status"
        />
      </el-form-item>
      <el-form-item label="检疫许可证号">
        <el-input v-model="form.check_id" />
      </el-form-item>
      <el-form-item label="检疫许可证图片">
        <el-upload
          action="http://localhost:9528/dev-api/imageUpload"
          list-type="picture-card"
          accept="image/jpeg,image/png"
          multiple
          :file-list="form.fileList"
          :before-upload="onBeforeUpload"
          :on-success="onUploadSuccess"
          :limit="3"
          :on-exceed="handleExceed"
          :auto-upload="true"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="出栏日期" prop="out_date">
        <el-date-picker v-model="form.create_date" type="date" placeholder="默认今天" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="如有备注请在这里写" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native.prevent="onSubmit">提交</el-button>
        <el-button @click="onCancel">清空</el-button>
        <el-button @click="gotopervious">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { newPig, getPigByID } from '@/api/pig.js'
export default {
  data() {
    return {
      newFlag: true,
      loading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      cdisabled: true,
      form: {
        fileList: [],
        id: 0,
        breed_place: '',
        weight: 1,
        sex: 1,
        traits: '',
        check_status: false,
        check_id: '',
        out_date: new Date(),
        remark: ''
      },
      registerRules: {
        breed_place: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (String(value).trim() === '') {
            callback(new Error('请输入产地'))
          } else {
            callback()
          }
        } }],
        weight: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (value <= 0) {
            callback(new Error('请输入有效的重量'))
          } else {
            callback()
          }
        } }],
        traits: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (String(value).trim() === '') {
            callback(new Error('请填写性状'))
          } else {
            callback()
          }
        } }],
        out_date: [{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
          if (String(value).trim() === '') {
            callback(new Error('请选择出栏日期'))
          } else {
            callback()
          }
        } }]
      }
    }
  },
  created() {
    if (this.$route.query.type === 'edit') {
      this.newFlag = false
      this.loading = true
      getPigByID(this.$route.query.id).then((response) => {
        this.form = response.obj
        this.loading = false
      }).catch(() => { this.loading = false })
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.enter_id = this.$store.getters.enter_id
          this.form.cut_state = 0
          newPig(this.form).then(response => {
            this.loading = false
            this.$confirm('已经提交完成，是否清空内容？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
            }).then(() => {
              this.form = {
                fileList: [],
                id: 0,
                breed_place: '',
                weight: 1,
                sex: 1,
                traits: '',
                check_status: false,
                check_id: '',
                out_date: new Date(),
                remark: ''
              }
            })
          })
        } else {
          this.$message({
            message: '请验证内容无误后再提交',
            type: 'warning'
          })
        }
      })
    },
    onCancel() {
      this.form = {
        fileList: [],
        id: 0,
        breed_place: '',
        weight: 1,
        sex: 1,
        traits: '',
        check_status: false,
        check_id: '',
        out_date: new Date(),
        remark: ''
      }
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed(files, fileList) {
      this.$message({
        message: '最多上传三张图片!',
        type: 'warning'
      })
    },
    onBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 5

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 5MB!')
      }
      this.$message('开始上传')
      return isIMAGE && isLt1M
    },
    onUploadSuccess(response, file, fileList) {
      this.form.fileList = fileList
      this.$message({
        message: '上传成功',
        type: 'success'
      })
    },
    gotopervious() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

